<template>
  <div class="header">
    <!-- <div class="headerInfo">
      <el-row class="demo-avatar demo-basic">
        <el-col :span="12">
          <div class="block" v-for="size in sizeList" :key="size">
            <el-avatar :size="size" :src="circleUrl"></el-avatar>
          </div>
        </el-col>
      </el-row>    
    </div> -->
    <div class="headerUsername">
      <el-avatar shape="circle" :size="20" :src="circleUrl" class="avatar"></el-avatar>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{username}}，欢迎您!</span>
    </div>
  </div>
</template>
    
<script>
export default {
  data() {
    return {
      username: JSON.parse(sessionStorage.getItem('userinfo')).name,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      sizeList: ["small"]
    }
  },
}
</script>
    
<style scoped>
.header {
  position: fixed;
  z-index: -1;
  height: 58px;
  width: 100%;
  /* background-image: url('@/assets/1.png'); */
  background-color: #1e78bf;
  margin-top: -22px;
}
.headerUsername{
  float: right;
  margin-right: 12%;
  padding-top: 20px;
  /* height: 60px;
  line-height:60px; */
  align-items: center;
  /*font-weight: 700;*/
  font-size: 14px;
  color:white;
}
.avatar{
  position: absolute;
}
body,
hr,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
p {
  padding: 0;
  margin: 0;
}

/*列表样式消除*/

ol,
ul,
li {
  list-style: none;
}
</style>